<template>
    <div class="app">
        <!-- 路由出口内容区 -->
        <div class="con">
            <router-view v-slot="{ Component }">
                <keep-alive>
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>
        <!-- 底部导航 -->
        <van-tabbar v-model="active" @change="onChange" active-color="#c82519" inactive-color="#333" :fixed="false">
            <van-tabbar-item v-for="(item, index) in menuArr" :key="index" :icon="item.icon" :badge="item.badge">{{
                item.name }}</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script setup lang="ts">
import router from '@/router'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
import { ref, computed, watchEffect } from 'vue'
import { useCartStore } from '@/stores/cartStore'
let route = useRoute()
let cartStore = useCartStore();
let active = ref(0);
let menuArr = ref([
    {
        name: '首页',
        icon: 'home-o',
        path: '/home',
        badge: ''
    },
    {
        name: '购物车',
        icon: 'cart-o',
        path: '/cart',
        badge: ''
    },
    {
        name: '订单',
        icon: 'balance-list-o',
        path: '/order',
        badge: ''
    },
    {
        name: '我的',
        icon: 'search',
        path: '/me',
        badge: ''
    }
])
//tabbar选中的元素改变
function onChange() {
    //获取选中下标
    let index = active.value
    // 获取路径
    let path = menuArr.value[index].path
    router.replace(path)
}

watchEffect(() => {
    menuArr.value[1].badge = cartStore.cartNum + '';
})

console.log(route.path)
let index = menuArr.value.findIndex((v) => v.path == route.path)
active.value = index

</script>
<style scoped lang="scss">
.app {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.con {
    // 内容较多，可能滚动
    overflow: auto;
    // 撑满除tabber之外的区域
    flex: 1;
}
</style>